<template>
  <div ref="container" class="login-container">
    <div style="float:left;">
      <JsHacker></JsHacker>
    </div>

    <div class="login-box">
      <!--账号/短信-->
      <div class="box">
        <div class="top">
          <div :class="{'default':true,'now':choiceId=='account'}" @click="go('account')">账号</div>
          <div :class="{'default':true,'now':choiceId=='verifyCode'}" @click="go('verifyCode')">短信</div>
        </div>

        <div class="center">
          <Account v-if="choiceId=='account'"></Account>
          <SMS v-if="choiceId=='verifyCode'"></SMS>
        </div>

        <!--第三方-->
        <div class="bottom">
          <ThirdParty></ThirdParty>
        </div>

        <div class="reg">
          <span @click.stop="goReg">去注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JsHacker from "@/components/login/JsHacker";
import ThirdParty from "@/components/login/ThirdParty";
import Account from "@/components/login/Account";
import SMS from "@/components/login/SMS";

export default {
  //组件名称
  name: "Login",
  //组件注册
  components: {JsHacker, ThirdParty, Account, SMS},
  //数据驱动
  data() {
    return {
      choiceId: "account"
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    goReg() {
      this.$router.push("/register");
    },
    go(tab) {
      this.choiceId = tab
    },
    login() {
      //校验
      //向后台发起请求,后端返回信息,

      //成功登录,信息保存
      this.$store.commit("setIsLogin", true)
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.login-box {
  //position: absolute;
  width: 100%;
  height: calc(100vh - 70px);

  .box {
    position: absolute; //相对定位
    top: 150px;
    right: 200px;
    width: 380px;
    display: flex;
    flex-direction: column;
    background-color: #F0F0F0;
    border-radius: 4px;

    .top {
      display: flex;
      flex-direction: row;
      width: calc(100% - 4px);
      height: 60px;
      margin: 2px auto;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;

      .default {
        font-size: 18px;
        //color: #888;
        color: #000;
        width: 50%;
        float: left;
        line-height: 60px;
        font-weight: lighter;
      }

      .now {
        color: #F00;
        font-weight: bolder;
        border-bottom-color: #F00;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
      }
    }
  }

  .reg {
    margin: 10px 0px;
    text-align: right;
    color: #FF0000;
    padding-right: 20px;

    span {
      cursor: pointer;
    }
  }
}
</style>